<div id="visits-animate">
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Submitter</th>
        <th>Type</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      {% for visit in visits %}
      <tr class="{% cycle "odd" "even" %}">
        <td style="width: 20%;"><a href="javascript:;" class="view-visit" data-visit="{{ visit.id }}">{{ visit.date_submitted|date:"F j, Y" }}</a></td>
        <td style="width: 25%;">{{ visit.submitter.get_full_name }}</td>
        <td style="width: 25%;">{{ visit.get_contact_type_display }}</td>
        <td style="width: 30%;">{{ visit.reason }}</td>
      <tr>
      {% endfor %}
    </tbody>
  </table>
  <div id="visit-paging" style="width: 100%; text-align: center;">
    <div style="float: left;">
      {% if page.has_previous %}
      <a href="javascript:;" id="visit-page-first" data-page="1">&laquo&laquo first</a> &nbsp;&nbsp;&nbsp; <a href="javascript:;" id="visit_page_previous" data-page="{{ page.previous_page_number }}">&laquo previous</a>
      {% else %}
      <span class="inactive-link">&laquo&laquo first &nbsp;&nbsp;&nbsp; &laquo previous</span>
      {% endif %}
    </div>
    <div style="float: right;">
      {% if page.has_next %}
      <a href="javascript:;" id="visit-page-next" data-page="{{ page.next_page_number }}">next &raquo</a> &nbsp;&nbsp;&nbsp; <a href="javascript:;" id="visit-page-last" data-page="{{ paginator.num_pages }}">last &raquo&raquo</a>
      {% else %}
      <span class="inactive-link">next &raquo &nbsp;&nbsp;&nbsp; last &raquo&raquo</span>
      {% endif %}
    </div>
  </div>
</div>
